<template>
	<div class="treeClass">
		<el-tree ref="treeRef" empty-text="暂无权限" :data="allRole" show-checkbox node-key="id" accordion :props="defaultProps" @check-change="checkChange" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, watch } from 'vue'

export default {
	name: 'showRole',
	components: {},
	props: {
		// 显示的数据
		allRole: {
			type: Array,
			default: () => []
		},
		// 默认选中
		selectedRole: {
			type: Array,
			default: () => []
		}
	},
	setup(props, { emit }) {
		const state = reactive({
			defaultProps: {
				children: 'list',
				label: 'name'
			}
		})

		const refs = reactive({
			treeRef: null
		})

		watch(props, val => {
			refs.treeRef.setCheckedKeys([])
			if (val.selectedRole.length > 0) {
				refs.treeRef.setCheckedKeys(val.selectedRole)
			}
		})

		const checkChange = () => {
			emit('getChecked', refs.treeRef.getCheckedKeys())
		}

		return {
			checkChange,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style lang="scss" scoped>
.treeClass {
	border-radius: 4px;
	border: 1px solid #cdd4df;
	padding: 12px;
	min-height: 500px;
}
</style>
